<template>
    <div class="addform">
        <p style="font-size: 25px;font-weight: bold;margin-left: 700px;margin-top: 40px">人员管理</p>
            <!-- 写表单 -->
            <el-form :model="obj" style="margin-top: 60px;">
                <el-form-item label="员工姓名" label-width="80px">
                    <el-input v-model="obj.name"  />
                </el-form-item>
                <el-form-item label="联系电话" label-width="80px">
                    <el-input v-model="obj.mobile" />
                </el-form-item>
                <el-form-item label="人员类型" label-width="80px">
                    <el-radio-group v-model="obj.type">
                            <el-radio value="1">管理员</el-radio>
                            <el-radio value="2">上门人员</el-radio>
                        </el-radio-group>
                </el-form-item>
                <el-form-item label="人员状态" label-width="80px">
                    <el-radio-group v-model="obj.state">
                        <el-radio value="1">启用</el-radio>
                        <el-radio value="2">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-button type="primary" @click="adds" style="margin-left: 200px;width:200px">添加</el-button>
            </el-form>
        </div>
    <div>
    <el-table :data="employer" style="width: 100%">
        <el-table-column prop="name" label="员工姓名" width="180" />
        <el-table-column prop="mobile" label="联系电话" width="180" />
        <el-table-column prop="get_type_display" label="人员类型" width="180"/>
        <el-table-column prop="get_state_display" label="人员状态" width="180"/>
        <el-table-column  label="操作" >
                <template #default="scope">
                    <el-button @click="del(scope.row.id)">删除</el-button>
                    <el-button @click="editdata(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
    </el-table>
    
       <el-pagination
          v-model:currentPage="query.page"
          v-model:page-size="query.pagesize"
          :page-sizes="[1, 2, 3, 4]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
    
        <el-dialog
            v-model="showflag"
            title="编辑"
            width="500"
        >
              <el-form :model="obj">
                <el-form-item label="员工姓名" label-width="80px">
                    <el-input v-model="obj.name"  />
                </el-form-item>
                <el-form-item label="联系电话" label-width="80px">
                    <el-input v-model="obj.mobile" />
                </el-form-item>
                <el-form-item label="人员类型" label-width="80px">
                    <el-radio-group v-model="obj.type">
                            <el-radio value="1">管理员</el-radio>
                            <el-radio value="2">上门人员</el-radio>
                        </el-radio-group>
                </el-form-item>
                <el-form-item label="人员状态" label-width="80px">
                    <el-radio-group v-model="obj.state">
                        <el-radio value="1">启用</el-radio>
                        <el-radio value="2">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="savedata">
                修改
                </el-button>
            </div>
            </template>
        </el-dialog>
    </div>
    </template>
    
<script setup>
import {ref,onMounted} from "vue"
import axios from "axios"
import {ElMessage,ElLoading} from "element-plus"
let employer=ref([])
let obj = ref({
    id:"",
    name:"",
    mobile:"",
    type:"",
    state:""
})
let query=ref({
    page:1,
    pagesize:2
})
//执行添加
const adds=()=>{
    console.log(obj.value)
    //执行接口
    axios.post("http://127.0.0.1:8000/user/person/",obj.value)
    .then(res=>{
        console.log(res)
        if(res.status==200){
            ElMessage.success('添加成功')
            obj.value={
            name:"",
            mobile:"",
            type:"",
            state:"",
            }  
        getdata() 
        }
    })
}
//删除
const del=(id)=>{
    axios.delete(`http://127.0.0.1:8000/user/person/${id}/`)
    .then(res=>{
        alert("删除成功")
    })
}
let total=ref(0)
//控制编辑对话框的变量
let showflag=ref(false)
const getdata=()=>{
    axios.get(`http://127.0.0.1:8000/user/person/?page=${query.value.page}&size=${query.value.pagesize}`)
    .then(res=>{
        console.log(res)
        total.value=res.data.count
        employer.value=res.data.results
    })
}
const handleSizeChange=(num)=>{
  query.value.pagesize=num
  getdata()
}
const handleCurrentChange=(num)=>{
  query.value.page=num
  getdata()
}
onMounted(()=>{
    getdata()
    
})
const editdata=(info)=>{
    showflag.value=true
    obj.value=info
}
const savedata=()=>{
   axios.put(`http://127.0.0.1:8000/user/person/${obj.value.id}/`,obj.value)
   .then(res=>{
    if(res.status==200){
        ElMessage.success('编辑成功')
        showflag.value=false
        obj.value={
            name:"",
            mobile:"",
            type:"",
            state:"",
            }  
        getdata() 
    }
   })
}
const addem=(info)=>{
    showflag.value=true
}
const add=()=>{
    console.log(obj.value)
    //执行接口
    axios.post("http://127.0.0.1:8000/user/person/",obj.value)
    .then(res=>{
        console.log(res)
        if(res.status==201){
            ElMessage.success('添加成功')
            obj.value={
            name:"",
            mobile:"",
            type:"",
            state:"",
            }  
        getdata() 
        }
    })
}

</script>
